<template>
	<view >
		<view class="select-area-sub-item" :style="'padding-left:'+Number(50+number)+'rpx'">
			<view class="flex-start" @click="showMenu = !showMenu">
			    <uni-icons :type="showMenu ? 'arrowdown' : 'arrowright'" customIcons="color-gray"></uni-icons>
				<view class="name">{{ subItem.name }}</view>
			</view>
		    <view class="right" @click="select()">
		        <view class="noselect" v-if="!subItem.checked"></view>
		        <view class="yesselect" v-else>
		            <iconsfont customIcons="icon-dagou" :color="'#ffffff'" size="20"></iconsfont>
		        </view>
		    </view>
		</view>
		<view v-show="showMenu">
		    <select-classify-sub-item
		        v-for="(subItem1, subIndex1) in subItem.children"
		        :key="subIndex1"
		        :subItem="subItem1"
				:number="number+15"></select-classify-sub-item>
		</view>
	</view>

</template>

<script>
export default {
	name: 'select-classify-sub-item',
	components: {
	},
    props: {
        subItem: {
            type: Object,
            default: () => {},
        },
		number:{
            type: Number,
            default:0,
        },
    },
    data() {
        return {
			showMenu: false,
		}
    },
    mounted() {},
    methods: {
        select() {
            this.subItem.checked = !this.subItem.checked
            // this.$emit("halfselect", this.subItem)
        },
		// halfselect() {
		//     this.$emit("halfselect", this.subItem)
		// },
		
    },
}
</script>

<style lang="scss">
.select-area-sub-item {
    height: 112rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 40rpx 0 0rpx;
    align-items: center;
    .name {
        color: $color-gray-1;
        font-size: 30rpx;
    }
}
.noselect {
    width: 38rpx;
    height: 38rpx;
    border: 2rpx solid #b2b2b2;
    border-radius: 8rpx;
}
.yesselect {
    width: 40rpx;
    height: 40rpx;
    background: $app-color-main;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
